<!--授权界面-->
<template>
  <Main :type="'ordinary'">
    <!-- <Title :title="'微信授权'" /> -->
    <el-steps :active="0" finish-status="success" style="padding:30px 150px;">
      <el-step title="授权" icon=""></el-step>
      <el-step title="更新" icon=""></el-step>
      <el-step title="预览" icon=""></el-step>
      <el-step title="发布" icon=""></el-step>
    </el-steps>
    <div class="grid-rt">
      <dl>
        <dt>授权说明</dt>
        <dd>
          1、一个微信小程序仅可授权给一个中天商户（如小店、客来店、智店等）；
        </dd>
        <dd>
          2、为保证所有功能的正常使用，授权时请保持默认选择，把权限统一授权给中天；
        </dd>
        <dd>3、新授权的小程序需与已授权的小程序及公众号主体一致；</dd>
        <dd>
          4、您在该入口授权的公众账号类型为小程序，请在授权页面正确选择。
        </dd>
      </dl>
      <dl>
        <dt>小程序类型</dt>
        <dd>
          1、企业类型账号，可以根据需要确定是否申请微信认证
          （认证入口：登录小程序——设置——基本设置——微信认证——详情）
        </dd>
        <dd>
          2、已认证账号可使用微信支付权限，个人类型账号暂不支持微信认证。
        </dd>
      </dl>
    </div>
    <Footer>
      <el-button
        type="primary"
        round
        :disabled="staus == 'authorized'"
        @click="submitFn"
        >{{ staus | stausu }}</el-button
      >
      <el-button
        v-if="$store.state.app_id === 'ZQ%3D%3D'"
        type="primary"
        round
        @click="baidu"
        >百度</el-button
      >
    </Footer>
    <!-- </div> -->
  </Main>
</template>

<script>
import { AUTHORIZE_STATUS, URL, CALLBACK, BAIDUURL } from "./service";
export default {
  name: "Wxchat",
  filters: {
    stausu(value) {
      return value === "authorized" ? "已授权" : "授权";
    }
  },
  data() {
    return {
      staus: ""
    };
  },
  created() {
    this.init();
    const query = this.$route.query;
    if (query.auth_code) {
      this.callBack(query.auth_code);
    }
  },
  methods: {
    async init() {
      await AUTHORIZE_STATUS().then(({ code, data }) => {
        if (code === 200) {
          this.staus = data;
        }
      });
    },
    async submitFn() {
      await URL().then(({ code, data }) => {
        if (code === 200) {
          this.$message({
            message: "即将进入授权界面",
            type: "success",
            onClose() {
              window.location.href = data.url;
            }
          });
        }
      });
    },
    async callBack(authCode) {
      await CALLBACK({ auth_code: authCode });
    },
    async baidu() {
      await BAIDUURL().then(({ code, data }) => {
        if (code === 200) {
          this.$message({
            message: "即将进入授权界面",
            type: "success",
            onClose() {
              window.location.href = data;
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.grid-rt {
  text-align: center;
  background-color: #fff;
  margin-top: 10px;
  padding-top: 30px;
  font-size: 12px;
  dl:nth-child(2) {
    margin-top: 40px;
  }
  dt {
    font-family: PingFangSC-Semibold;
    color: #001529;
  }
  dd {
    padding: 5px 0;
  }
}
</style>
